<template>
    <div class="cart">
        <nav-bar class="nav-bar">
            <div class="center" slot="center">购物车({{length}})</div>
            <div class="right" slot="right">管理</div>
        </nav-bar>
        <cart-list/>
        <cart-bottom-bar/>
    </div>
</template>

<script>
    import NavBar from "components/common/navbar/NavBar"
    import CartList from "./childComps/CartList"
    import CartBottomBar from "./childComps/CartBottomBar"

    import {mapGetters} from "vuex"

    export default {
        name: "Cart",
        components:{
            NavBar,
            CartList,
            CartBottomBar
        },
        computed:{
            ...mapGetters({
                length:"cartListLength"
            })
        }
    }
</script>

<style scoped>
    .nav-bar{
        background-color: var(--color-tint);
        color: #fff;
    }
</style>
